<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="8" style="text-align: left">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves @click="reToOTMFunc">重推入库</el-button>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item fsc-search" placeholder="指令号-回车查询"
                    v-model="listQuery.condition.shipmentGid" @keyup.enter.native="searchClick"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="searchClick">
            搜索
          </el-button>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                     @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="theadCheckVal">
                  <el-checkbox label="releaseGid">运单号</el-checkbox>
                  <el-checkbox label="storeCode">仓库名称</el-checkbox>
                  <el-checkbox label="vin">车架号</el-checkbox>
                  <el-checkbox label="shipmentGid">指令号</el-checkbox>
                  <el-checkbox label="inboundTime">入库时间</el-checkbox>
                  <el-checkbox label="inboundStatus">入库状态</el-checkbox>
                  <el-checkbox label="exportStatus">推送状态</el-checkbox>
                  <el-checkbox label="exportRemarks">推送备注</el-checkbox>
                  <el-checkbox label="gmtCreate">推送时间</el-checkbox>
                  <el-checkbox label="gmtModified">推送修改时间</el-checkbox>
                  <el-checkbox label="requestId">推送请求id</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>
    <div v-show="searchFlag"  style="height: auto;margin-top: 10px;">
      <el-form ref="form" :model="listQuery.condition" label-width="80px" :inline="true">
        <el-form-item label="指令号:">
          <el-input v-model="listQuery.condition.shipmentGid" placeholder="请输入指令号"></el-input>
        </el-form-item>
        <el-form-item label="车架号:">
          <el-input type="textarea" :rows="2" style="width: 250px"
                    v-model="listQuery.condition.vin"  placeholder="请输入车架号, 以逗号来分隔"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称:">
          <el-input v-model="listQuery.condition.storeHouseName" placeholder="请输入仓库名称"></el-input>
        </el-form-item>
        <el-form-item label="数据id:">
          <el-input v-model="listQuery.condition.requestId" placeholder="请输入推送数据的id"></el-input>
        </el-form-item>
        <el-form-item label="补发时间:">
          <el-date-picker class="w200" v-model="listQuery.condition.startDate" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" ></el-date-picker>
          <span class="zhi-font">至</span>
          <el-date-picker class="w200" v-model="listQuery.condition.endDate" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="list" style="margin-left: 10px">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="clean:both"></div>

    <el-table ref="paymentTable" :data="paymentList" v-loading="listLoading" element-loading-text="加载中"
              border fit @selection-change="handleSelectionChange"
              highlight-current-row style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableThead'
                       :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'inboundStatus'">{{scope.row[value.key] | inboundLineStatusFilter}}</div>
          <div v-else-if="value.key === 'exportStatus'">{{scope.row[value.key] | exportStatusFilter}}</div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.current" :page-sizes="[10,20,30,50]" :page-size="listQuery.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import * as inboundNoticeAPI from '@/api/inbound/inboundNotice'
import waves from '@/directive/waves' // 水波纹指令
import * as Utils from '@/utils/index'
const defautlTableThead = [
  // { key: 'id', title: '通知单号', width: 150 },
  { key: 'releaseGid', title: '运单号', width: 150 },
  { key: 'storeCode', title: '仓库名称', width: 150 },
  // { key: 'storeHouseId', title: '仓库id', width: 150 },
  { key: 'vin', title: '车架号', width: 150 },
  { key: 'shipmentGid', title: '指令号', width: '130' },
  { key: 'inboundTime', title: '入库时间', width: 130 },
  { key: 'inboundStatus', title: '入库状态', width: 100 },
  // { key: 'exportType', title: '推送类型', width: 160 },
  // { key: 'relationId', title: '关联id', width: '' },
  // { key: 'targetSource', title: '系统来源', width: 120 },
  { key: 'exportStartTime', title: '推送开始时间', width: '130' },
  { key: 'exportEndTime', title: '推送结束时间', width: 130 },
  { key: 'exportStatus', title: '推送状态', width: '' },
  { key: 'exportRemarks', title: '推送备注', width: '130' },
  // { key: 'dataContent', title: '推送数据', width: 150 },
  { key: 'gmtModified', title: '推送修改时间', width: 150 },
  { key: 'gmtCreate', title: '推送时间', width: 150 },
  { key: 'requestId', title: '推送请求id', width: '' }
]
export default {
  name: 'payment',
  directives: {
    waves
  },
  data() {
    return {
      theadCheckVal: ['releaseGid', 'storeCode', 'vin',
        'shipmentGid', 'inboundTime', 'inboundStatus',
        'exportStatus', 'exportRemarks', 'gmtCreate', 'gmtModified', 'requestId'
      ],
      tableThead: defautlTableThead,
      selectRow: [],
      listQuery: {
        current: 1,
        size: 10,
        total: 0,
        condition: {
          startDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 00:00:00'),
          endDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 23:59:59')
        }
      },
      paymentList: [],
      listLoading: true,
      searchFlag: true,
      downloadLoading: false,
      downloadData: []
    }
  },
  created() {
    this.list()
  },
  watch: {
    theadCheckVal(valArr) {
      this.tableThead = defautlTableThead.filter(v => {
        for (let i = 0; i < valArr.length; i++) {
          if (v.key === valArr[i]) {
            return v
          }
        }
      })
    }
  },
  methods: {
    list() {
      // 列表查询
      this.$data.listLoading = true
      // 处理是否展开更多
      let queryParam = {}
      if (this.$data.searchFlag) {
        queryParam = this.$data.listQuery
      } else {
        Object.assign(queryParam, this.$data.listQuery)
        queryParam.condition = {
          startDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 00:00:00'),
          endDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 23:59:59')
        }
      }
      queryParam.condition.houseId = this.$store.getters.currentStorehouse.id
      inboundNoticeAPI.queryPushInboundOtm(queryParam).then(result => {
        if (result.code === 0) {
          this.$data.paymentList = result.data.records
          this.$data.listQuery.total = result.data.total
        } else {
          this.$notify({
            title: '信息提示',
            message: result.message,
            type: 'error',
            duration: 2000
          })
        }
        this.$data.listLoading = false
      })
    },
    // 重新推送
    reToOTMFunc() {
      const that = this
      const arr = that.selectRow
      if (that.checkOneSelect(arr)) {
        this.$confirm('确定对选中项进行重推?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$data.listLoading = true
          let new_str = ''
          for (let c = 0; c < arr.length; c++) {
            if (c < arr.length - 1) {
              new_str += arr[c].id + ','
            } else {
              new_str += arr[c].id
            }
          }
          inboundNoticeAPI.pushInboundOtm({ condition: { keys: new_str }}).then(result => {
            if (result.code === 0) {
              this.$message({
                title: '操作成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.list()
            } else {
              this.$message({
                title: '错误提示',
                message: result.message,
                type: 'info',
                duration: 2000
              })
            }
            this.$data.listLoading = false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作',
            duration: 2000
          })
        })
      }
    },
    getInfoKeys() {
      const selects = this.$data.selectRowInfo
      this.checkInfoids = ''
      selects.forEach((v) => {
        this.$data.checkInfoids += v.prepareLineId + ','
      })
    },
    // 主表-列选择
    handleSelectionChange(val) {
      this.selectRow = val
    },
    // 检查是否选择单条
    checkOneSelect(arr) {
      const l = arr.length
      if (l === 0) {
        this.$message({
          message: '未选择',
          type: 'warning',
          duration: 2000
        })
        return false
      }
      // if (l > 1) {
      //   this.$message({
      //     message: ' 不可多选, 请选择单条调整!',
      //     type: 'warning',
      //     duration: 2000
      //   })
      //   return false
      // }
      return true
    },
    handleSizeChange(val) {
      // 分页size变化
      this.$data.listQuery.size = val
      this.list()
    },
    handleCurrentChange(val) {
      // 分页当前页变化
      this.$data.listQuery.current = val
      this.list()
    },
    moreClick() {
      // 更多click
      this.$data.searchFlag = !this.$data.searchFlag
    },
    searchClick() {
      // 搜索
      this.list()
    },
    reset() {
      this.$data.listQuery.condition = {
      }
      this.list()
    }
  }
}
</script>
<style scoped>

</style>
